<template>
	<view class="order" :style="{'--price':vuex_config.price}">
		<view class="item" v-for="(item,index) in dataList" :key='index'>
			<view class="top">
				<text>订单号：{{item.order_no}}</text>
				<text class="time">{{item.end_date}}</text>
			</view>
			<view class="bottom">
				<view class="b-top">
					<text>{{item.type_name}}</text>
					<text class="price">￥{{item.prcie}}</text>
				</view>
				<view class="b-bottom">
					<view class="refund" v-if="item.pay_status == 1" @click="refund(item)">申请退款</view>
					<view class="btn">{{item.pay_status | formatStatus}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/pagingMixin'
	import {
		uniModal
	} from '@/utils/uniPromise'
	export default {
		mixins: [pagingMixin],
		data() {
			return {
				dataList: [],
				show: false
			}
		},
		filters: {
			formatStatus(stats) {
				switch (stats) {
					case 1:
						return '已支付'
					case 2:
						return '已退款'
					case 3:
						return '退款申请中'
					case 4:
						return '已完成'
				}
			}
		},
		onLoad() {
			this.initPage()
		},
		onReachBottom() {
			this._load_data()
		},
		methods: {
			initPage() {
				this._init_data('GetRhythmOrderList', {})
			},
			refund(item) {
				uniModal({
					content:'是否确定退款'
				}).then(res=>{
					if(res == 'success'){
						this.$adminPost('SetRhythmManageOrderRefund',{order_no:item.order_no,status:3}).then(res=>{
							this.initPage()
						})
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.order {
		.item {
			width: 100%;
			background-color: #fff;
			padding: 30rpx;
			border-bottom: 1px solid #F3F3F3;

			.top {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				color: #333;
				padding: 20rpx 0;
				border-bottom: 1px solid #F7F7F7;

				.time {
					color: #9A9A9A;
				}
			}

			.bottom {
				.b-top {
					padding: 46rpx 0 52rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 30rpx;
					color: #303133;

					.price {
						color: var(--price);
					}
				}

				.b-bottom {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.btn {
						padding: 0 30rpx;
						height: 52rpx;
						background: #EBEBEB;
						border-radius: 28rpx;
						font-size: 24rpx;
						color: #303133;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.refund {
						width: 128rpx;
						height: 52rpx;
						background: #1966FF;
						border-radius: 28rpx;
						font-size: 24rpx;
						color: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 20rpx;
					}
				}
			}
		}
		
	}
</style>
